<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽</title>
</head>
<body>
<div id="root">

    <child1>
        <button>点击</button>
    </child1>
    <child2>
        <button>按钮1</button>
        <template v-slot:s4>
            <button>按钮1</button>
            <button>按钮1</button>
        </template>
        <template v-slot:s2>
            <p>你好数控技术打开</p>
            <p>你好数控技术打开</p>
        </template>
    </child2>
    <child3>
        <template v-slot="aa">
          <h4>{{aa.a1}}</h4>
            <h4>{{aa.a2}}</h4>
        </template>
        <template v-slot:whh="aaa">
            <h4>{{aaa.a3.name}}</h4>
        </template>
    </child3>
</div>
<template id="child1">
    <fieldset>
        <legend>
            <h1>child1</h1></legend>
        <slot></slot>
        <h2>这是星期一</h2>
    </fieldset>
</template>
<template id="child2">
    <fieldset>
        <legend>
            <h1>child2</h1></legend>
        <h2>明天星期二</h2>
        <slot name="s1"></slot>
        <slot name="s2"></slot>
        <slot name="s3"></slot>
        <slot name="s4"></slot>
    </fieldset>
</template>
<template id="child3">
    <fieldset>
        <legend><h1>child3</h1></legend>
       <slot :a1="value1"></slot>
        <slot :a2="value2"></slot>
        <slot :a3="obj" name="whh"></slot>

    </fieldset>
</template>
</body>
</html>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let child1 = {
        template: "#child1",
        data: () => {
            return {}
        }
    };
    let child2 = {
        template: "#child2",
        data: () => {
            return {}
        }
    };
    let child3 = {
        template: "#child3",
        data: () => {
            return {value1:"我爱学习吗",
                value2:"学习使我快乐吗",
            obj:{
                name:"哇哈哈",
                taste:"酸甜",
            }
            }
        }
    }
    new Vue({
        el: "#root",
        data: {
            value1:"我爱学习",
            value2:"学习使我快乐",
        },
        components: {
            child1,
            child2,
            child3,
        }
    })
</script>
